<template>
    <view class="container">
        <!-- 头部标题 -->
        <view class="header">
            <text class="title">选择时段</text>
        </view>

        <!-- 时间段与价格输入框 -->
        <view class="time-slots">
            <view v-for="(slot, index) in timeSlots" :key="index" class="time-slot">
                <!-- 显示时间段 -->
                <text class="time">{{ slot.start }} - {{ slot.end }}</text>
                <!-- 输入框，使用 v-model 双向绑定，并在输入时通过 $emit 将价格传递给父组件 -->
                <input class="price-input" placeholder="输入价格" type="number" v-model="priceList[index].price"
                    @input="updatePrice(index, priceList[index].price)" />
            </view>
        </view>

        <!-- 批量设置价格按钮 -->
        <view class="batch-action">
            <input class="batch-price-input" placeholder="输入统一价格" type="number" v-model="batchPrice"
                @input="onBatchPriceChange" />
            <button class="batch-btn" @click="setBatchPrice">批量设置价格</button>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        newDatas: {
            type: Array, // 假设 newDatas 是一个数组
            // default: () => [], // 默认值为空数组
        },
        duration: {
            type: Number,
            default: 30, // 默认时长为 90 分钟
        },
    },
    data() {
        return {
            openingTime: "", // 营业开始时间
            closingTime: "", // 营业结束时间
            timeSlots: [], // 存储时间段
            priceList: [], // 存储时间和价格信息（从父组件传入）
            batchPrice: "", // 批量设置的统一价格
            localDatas: [...this.newDatas] // 创建一个本地副本
        };
    },
    created() {
        // console.log("hhhhhswwww:" + JSON.stringify(this.newDatas));
		this.loadBusinessHours();
        // this.initializeTimeSlots(); // 初始化时间段
    },
    watch: {
        newDatas(newVal) {
            this.localDatas = [...newVal]; // 更新本地副本
            this.initializeTimeSlots(); // 更新时间段
        },
        duration(newDuration) {
            this.initializeTimeSlots(); // 时长更新时重新初始化时间段
        }
    },
    methods: {
		// 获取本地存储的营业时间
		    loadBusinessHours() {
		        const storeData = uni.getStorageSync('xyvenue:userstore'); // 获取本地存储的数据
		        if (storeData && storeData.open_start && storeData.open_end) {
					console.log("openingTime:" + 1111);
		            this.openingTime = storeData.open_start; // 设置开店时间
		            this.closingTime = storeData.open_end; // 设置关店时间
		        }
				this.initializeTimeSlots(); // 确保时间加载后才初始化时间段
		    },
        // 将时间字符串转换为分钟数
        timeToMinutes(time) {
            const [hours, minutes] = time.split(":").map(Number);
            return hours * 60 + minutes;
        },
        // 将分钟数转换为时间字符串
        minutesToTime(minutes) {
            const hours = Math.floor(minutes / 60);
            const mins = minutes % 60;
            return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
        },
        // 初始化时间段列表
        initializeTimeSlots() {
            const startMinutes = this.timeToMinutes(this.openingTime);
            const endMinutes = this.timeToMinutes(this.closingTime);

            this.timeSlots = []; // 清空原有时间段
            this.priceList = []; // 确保清空原有价格列表

            let currentMinutes = startMinutes;

            // 按照当前的 duration 重新计算时间段
            while (currentMinutes < endMinutes) { // 改成 < endMinutes，确保不会错过最后一个时间段
                const startTime = this.minutesToTime(currentMinutes);
                const endTime = this.minutesToTime(currentMinutes + this.duration);

                // 如果下一个时间段超出了营业结束时间，则跳出循环
                if (currentMinutes + this.duration > endMinutes) {
                    break;
                }

                this.timeSlots.push({
                    start: startTime,
                    end: endTime,
                });

                // 确保 priceList 长度和 timeSlots 一致
                this.priceList.push({
                    time: startTime,
                    price: "", // 初始化价格为空
                });

                currentMinutes += this.duration;
            }

            // 如果传入了 initialPrices，并且长度和 timeSlots 相同，则填充价格
            if (this.newDatas.length && this.newDatas.length === this.timeSlots.length) {
                this.newDatas.forEach((price, index) => {
                    this.priceList[index].price = price.price || ""; // 假设 price 是一个包含 price 属性的对象
                });
            }
        },
        // 每次输入价格时，通知父组件更新价格
        updatePrice(index, price) {
            const validPrice = parseFloat(price);
            const startTime = this.timeSlots[index].start;
            const endTime = this.timeSlots[index].end;
            this.$emit("update-price", {
                index,
                price: validPrice,
                startTime,
                endTime
            });
        },
        // 批量设置价格
        setBatchPrice() {
            console.log('Selected newDatas:', this.newDatas); // 输出房间数据

            const validPrice = parseFloat(this.batchPrice);
            // 批量更新价格
            this.priceList.forEach((item, index) => {
                if (item) { // 确保 item 存在
                    item.price = validPrice;
                    this.updatePrice(index, validPrice); // 触发更新价格事件
                }
            });
        },
        // 批量价格输入变化时，更新 batchPrice
        onBatchPriceChange() {
            const validPrice = parseFloat(this.batchPrice);
            if (isNaN(validPrice) || validPrice <= 0) {
                this.batchPrice = ''; // 如果输入无效，清空批量价格框
            }
        },
    },
};
</script>

<style scoped>
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.time-slots {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.time-slot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 20rpx;
		margin-bottom: 10rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.time {
		font-size: 28rpx;
		color: #333;
	}

	.price-input {
		width: 180rpx;
		height: 50rpx;
		border: 1px solid #ccc;
		border-radius: 8rpx;
		padding: 0 10rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.batch-action {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 两边均匀留白 */
		margin: 0 20rpx;
		/* 设置整体左右边距，调整整体布局 */
	}

	.batch-price-input {
		flex: 1;
		/* 输入框占据剩余空间 */
		height: 50rpx;
		line-height: 50rpx;
		/* 文字垂直居中 */
		border: 1px solid #ccc;
		border-radius: 8rpx;
		padding: 0 10rpx;
		/* 输入框内部左右留白 */
		font-size: 28rpx;
		text-align: center;
		margin-right: 10rpx;
		/* 调整间距 */
	}

	.batch-btn {
		height: 50rpx;
		/* 与输入框保持一致 */
		line-height: 50rpx;
		/* 文字垂直居中 */
		padding: 0 24rpx;
		/* 内边距适中 */
		background-color: #65C61D;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		border: none;
		cursor: pointer;
		text-align: center;
	}
</style>